﻿body {
  /*background: url("../images/bg.png") repeat;*/
  background-size: 0.2rem;
}
.page-one {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}
.page-one .hot {
  position: absolute;
  left: 0.23404255rem;
  top: 0.31914894rem;
  background: url('../images/1/hot.png') no-repeat;
  width: 0.94468085rem;
  height: 0.98723404rem;
  background-size: contain;
}
.page-one .cloud {
  position: absolute;
  right: 2.63829787rem;
  top: 0.39574468rem;
  background: url('../images/1/cloud.png') no-repeat;
  width: 1.59574468rem;
  height: 0.99574468rem;
  background-size: contain;
  animation: cloud 4s 2.5s infinite alternate linear;
}
.page-one .left-arrow {
  position: absolute;
  left: 0;
  top: 4.29787234rem;
  background: url("../images/1/left.png") no-repeat;
  width: 2.58297872rem;
  height: 1.08085106rem;
  background-size: contain;
}
.page-one .right-arrow {
  position: absolute;
  top: 0;
  right: 0;
  background: url("../images/1/right.png") no-repeat;
  width: 2.01702128rem;
  height: 1.5787234rem;
  background-size: contain;
}
.page-one .bullet-text-first {
  position: absolute;
  background: url("../images/1/time.png") no-repeat;
  background-size: contain;
  width: 8.81276596rem;
  height: 1.88085106rem;
  top: 1.53191489rem;
  left: 0.74468085rem;
  animation: text-left 2s ease;
}
.page-one .bullet-text-third {
  position: absolute;
  top: 1.95744681rem;
  left: 2.98723404rem;
  background: url("../images/1/gift-word.png") no-repeat;
  background-size: contain;
  width: 12.2rem;
  height: 3.37021277rem;
  animation: text-right 2s ease;
}
.page-one .photo-area {
  padding-top: 2.4893617rem;
}
.page-one .photo-area .photo-content {
  margin: 0 auto;
  width: 14.98rem;
  height: 15.9787234rem;
  background-color: #fff;
  position: relative;
  padding: 0.80851064rem 0.85106383rem 2.38297872rem;
}
.page-one .photo-area .photo-content .photo {
  width: 100%;
  height: 100%;
}
.page-one .photo-area .photo-content .photo-bg {
  width: 100%;
  height: 100%;
  background: url("../images/1/photo-bg.png") no-repeat;
  background-size: cover;
  position: relative;
}
.page-one .photo-area .photo-content .photo-bg .drag-area {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: none;
}
.page-one .photo-area .photo-content .photo-bg .drag-area #tag-pic {
  width: 20%;
  display: block;
  z-index: 5;
}
.page-one .photo-area .photo-content .balloon {
  position: absolute;
  left: 0.22978723rem;
  top: 0.19148936rem;
  background: url("../images/1/oldman.png") no-repeat;
  width: 2.04680851rem;
  height: 3.78723404rem;
  background-size: contain;
  animation: balloon 6s 2.5s infinite alternate linear;
  z-index: 1111;
}
.page-one .photo-area .photo-content .crown {
  position: absolute;
  top: -0.61702128rem;
  right: -0.81702128rem;
  background: url("../images/1/wg.png") no-repeat;
  width: 1.99148936rem;
  height: 1.82978723rem;
  background-size: contain;
  z-index: 1111;
}
.page-one .photo-area .photo-content .cool {
  position: absolute;
  left: 0.5106383rem;
  bottom: 1.0893617rem;
  background: url("../images/1/cool.png") no-repeat;
  width: 5.01276596rem;
  height: 2.34468085rem;
  background-size: contain;
  z-index: 1111;
}
.page-one .photo-area .photo-content .hand {
  position: absolute;
  bottom: 0.64680851rem;
  left: 6.37021277rem;
  background: url("../images/1/hand.png") no-repeat;
  width: 1.72765957rem;
  height: 1.31489362rem;
  background-size: contain;
  z-index: 1111;
}
.page-one .photo-area .photo-content .tree {
  position: absolute;
  bottom: 0.94893617rem;
  right: 0.20425532rem;
  background: url("../images/1/tree.png") no-repeat;
  width: 2.64255319rem;
  height: 3.51914894rem;
  background-size: contain;
  z-index: 1111;
}
.page-one .dot-left {
  position: absolute;
  left: 1.46808511rem;
  top: 20.59574468rem;
  background: url("../images/1/dot-l.png") no-repeat;
  width: 1.03829787rem;
  height: 0.82978723rem;
  background-size: contain;
  animation: shake-delay 3s infinite;
}
.page-one .dot-center {
  position: absolute;
  left: 3.04255319rem;
  top: 20.59574468rem;
  background: url("../images/1/word.png") no-repeat;
  width: 9.91914894rem;
  height: 0.97446809rem;
  background-size: contain;
}
.page-one .dot-right {
  position: absolute;
  right: 1.03829787rem;
  top: 20.19574468rem;
  background: url("../images/1/dot-r.png") no-repeat;
  width: 1.03829787rem;
  height: 0.82978723rem;
  background-size: contain;
  animation: shake-delay 3s infinite;
}
.page-one .tag-area {
  /*padding-top: 2.40425532rem;*/
  padding-top: 1.00425532rem;
  
  width: 13.50638298rem;
  overflow: hidden;
  margin: 0 auto;
  display: flex;
  display: -webkit-box;
  -webkit-box-pack: center;
  justify-content: center;
  /*.tag-list{
      //暂空
    }
    .tag-list li{
      width: 582/@r;
      height: 798/@r;
      border: 1px solid rgba(255,255,255,0.8);
      background-color: rgba(255,255,255,0.2);
      float: left;
      margin-right: 66/@r;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      display: flex;
      display: -webkit-box;
      -webkit-box-pack: center;
      justify-content: center;
      -webkit-box-align: center;
    }
    .tag-list li:nth-last-child(1){
      margin-right: 0;
    }
    .tag-list li:nth-child(1) img{
      width: 481*0.76/@r;
      height: 890*0.76/@r;
    }
    .tag-list li:nth-child(2) img{
      width: 544/@r;
      height: 673/@r;
    }
    .tag-list li:nth-child(3) img{
      width: 485/@r;
      height: 685/@r;
    }
    .tag-list li:nth-child(4) img{
      width: 621*0.8/@r;
      height: 827*0.8/@r;
    }
    .tag-list li:nth-child(5) img{
      width: 572/@r;
      height: 618/@r;
    }*/
}
.page-one .tag-area .swiper-slide {
  height: 3.39574468rem;
  border: 1px solid black;
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  display: flex;
  display: -webkit-box;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
}
.page-one .tag-area .swiper-selected {
  border: 1px solid rgba(255, 0, 0, 0.8);
}
.page-one .tag-area .swiper-slide img {
  width: 2.43404255rem;
  height: 2.62978723rem;
}
.page-one .star-left {
  position: absolute;
  left: 1.65957447rem;
  top: 27.44680851rem;
  background: url('../images/1/star.png') no-repeat;
  width: 0.75744681rem;
  height: 0.70638298rem;
  background-size: contain;
  animation: star 1.2s linear infinite;
}
.page-one .star-right {
  position: absolute;
  right: 1.63829787rem;
  top: 25.90638298rem;
  background: url("../images/1/star2.png") no-repeat;
  width: 0.71489362rem;
  height: 1.10212766rem;
  background-size: contain;
  animation: star 1.2s linear infinite;
}
.page-one .word {
  position: absolute;
  left: 2.22553191rem;
  top: 26.14042553rem;
  background: url("../images/1/td.png") no-repeat;
  width: 11.4rem;
  height: 1.80425532rem;
  background-size: contain;
}
@keyframes text-left {
  0% {
    transform: translate(-8.81276596rem, 0.85106383rem);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes text-right {
  0% {
    transform: translate(12.2rem, -0.85106383rem);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes cloud {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-0.68085106rem);
  }
}
@keyframes balloon {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.85106383rem);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes star {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes shake-delay {
  0%,
  75% {
    -webkit-transform: rotate(0);
  }
  77.5% {
    -webkit-transform: rotate(-50deg);
  }
  80% {
    -webkit-transform: rotate(45deg);
  }
  82.5% {
    -webkit-transform: rotate(-40deg);
  }
  85% {
    -webkit-transform: rotate(35deg);
  }
  87.5% {
    -webkit-transform: rotate(-30deg);
  }
  90% {
    -webkit-transform: rotate(25deg);
  }
  92.5% {
    -webkit-transform: rotate(-20deg);
  }
  95% {
    -webkit-transform: rotate(15deg);
  }
  97.5% {
    -webkit-transform: rotate(-10deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
.page-two {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}
.page-two .fire-one {
  position: absolute;
  left: 1.17021277rem;
  top: 0.68085106rem;
  background: url("../images/2/fire1.png") no-repeat;
  width: 1.25531915rem;
  height: 0.91914894rem;
  background-size: contain;
}
.page-two .give-gift {
  position: absolute;
  left: 1.40425532rem;
  top: 1.8893617rem;
  background: url("../images/2/write.png") no-repeat;
  width: 13.32765957rem;
  height: 1.20851064rem;
  background-size: contain;
  animation: title 2s ease;
}
.page-two .fire-two {
  position: absolute;
  right: 1.36170213rem;
  top: 0.37446809rem;
  background: url("../images/2/fire2.png") no-repeat;
  width: 1.25531915rem;
  height: 0.91914894rem;
  background-size: contain;
}
.page-two .fire-three {
  position: absolute;
  right: 0.92765957rem;
  top: 3.09787234rem;
  background: url("../images/2/fire3.png") no-repeat;
  width: 0.66382979rem;
  height: 0.73191489rem;
  background-size: contain;
}
.page-two .triangle {
  position: absolute;
  left: 7.34042553rem;
  top: 4.05106383rem;
  background: url("../images/2/tra.png") no-repeat;
  width: 1.20425532rem;
  height: 1.06382979rem;
  background-size: contain;
  opacity: 0;
  animation: upgo 2s 2s ease infinite;
}
.page-two .heart-balloon {
  position: absolute;
  top: 4.97021277rem;
  right: 2.59574468rem;
  background: url("../images/2/heart.png") no-repeat;
  width: 1.67659574rem;
  height: 3.09787234rem;
  background-size: contain;
  z-index: 3;
  animation: balloon2 6s 2.5s infinite alternate linear;
}
.page-two .tarea {
  width: 100%;
  padding: 5.8212766rem 1.38297872rem 0;
}
.page-two .tarea .tinner {
  width: 100%;
  position: relative;
}
.page-two .tarea .tinner label {
  font-size: 0.7rem;
  color: #fff;
  display: block;
}
.page-two .tarea .tinner label i {
  background: url("../images/2/w-logo.png") no-repeat;
  width: 0.87659574rem;
  height: 0.92340426rem;
  background-size: contain;
  display: inline-block;
}
.page-two .tarea .tinner textarea {
  width: 100%;
  height: 8.81702128rem;
  border: 1px solid rgba(255, 255, 255, 0.8);
  margin-top: 0.25531915rem;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 8px;
}
.page-two .tarea .tinner input {
  display: block;
  width: 100%;
  height: 1.45531915rem;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background-color: rgba(255, 255, 255, 0.5);
  margin-top: 0.76595745rem;
  border-radius: 4px;
  padding-left: 0.95744681rem;
  color: #1d2958;
}
.page-two .tarea .tinner input::-moz-placeholder,
.page-two .tarea .tinner textarea::-moz-placeholder {
  color: #1d2958;
}
.page-two .tarea .tinner input:-ms-input-placeholder,
.page-two .tarea .tinner textarea:-ms-input-placeholder {
  color: #1d2958;
}
.page-two .tarea .tinner input::-webkit-input-placeholder,
.page-two .tarea .tinner textarea::-webkit-input-placeholder {
  color: #1d2958;
}
.page-two .tarea .tinner .star {
  position: absolute;
  top: 12.42553191rem;
  left: 0.1787234rem;
  background: url("../images/2/star.png") no-repeat;
  width: 0.74042553rem;
  height: 1.46808511rem;
  background-size: contain;
}
.page-two .tarea .tinner .button-wrap {
  width: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  margin-top: 5rem;
}
.page-two .tarea .tinner button {
  padding: 0 0.76595745rem;
  height: 1.62553191rem;
  line-height: 1.62553191rem;
  color: #1d2958;
  border-radius: 4px;
  font-size: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 auto;
}
.page-two .heart-two {
  position: absolute;
  top: 19.94042553rem;
  right: 0.56170213rem;
  background: url("../images/2/smheart.png") no-repeat;
  width: 0.45531915rem;
  height: 0.45531915rem;
  background-size: contain;
}
.page-two .giftBox {
  position: absolute;
  top: 20.57446809rem;
  right: 0.76595745rem;
  background: url("../images/2/gift.png") no-repeat;
  width: 1.83829787rem;
  height: 1.13617021rem;
  background-size: contain;
}
.page-two .fire-four {
  position: absolute;
  top: 26.72340426rem;
  left: 0.28085106rem;
  background: url("../images/2/fire4.png") no-repeat;
  width: 0.87234043rem;
  height: 1.12340426rem;
  background-size: contain;
}
.page-two .giftBox-two {
  position: absolute;
  top: 25.68510638rem;
  left: 1.14893617rem;
  background: url("../images/2/gift2.png") no-repeat;
  width: 2.06808511rem;
  height: 1.27659574rem;
  background-size: contain;
}
.page-two .fire-five {
  position: absolute;
  top: 25.5106383rem;
  left: 3.28510638rem;
  background: url("../images/2/fire5.png") no-repeat;
  width: 0.64680851rem;
  height: 0.8rem;
  background-size: contain;
}
.page-two .balloon-two {
  position: absolute;
  top: 24.97021277rem;
  right: 1rem;
  background: url("../images/2/balloon.png") no-repeat;
  width: 1.30212766rem;
  height: 3.30638298rem;
  background-size: contain;
}
@keyframes title {
  0% {
    transform: translate(-13.32765957rem, 0.85106383rem);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes upgo {
  0% {
    transform: translateY(-0.68085106rem);
  }
  80% {
    transform: translateY(0.04255319rem);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}
@keyframes balloon2 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0.85106383rem);
  }
  100% {
    transform: translateY(0);
  }
}
.page-three,
.page-five {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}
.page-three .hot,
.page-five .hot {
  position: absolute;
  left: 0.23404255rem;
  top: 1.53191489rem;
  background: url('../images/1/hot.png') no-repeat;
  width: 0.94468085rem;
  height: 0.98723404rem;
  background-size: contain;
}
.page-three .cloud,
.page-five .cloud {
  position: absolute;
  right: 2.63829787rem;
  top: 1.56595745rem;
  background: url('../images/1/cloud.png') no-repeat;
  width: 1.59574468rem;
  height: 0.99574468rem;
  background-size: contain;
  animation: cloud 4s 2.5s infinite alternate linear;
}
.page-three .bullet-text-first,
.page-five .bullet-text-first {
  position: absolute;
  background: url("../images/1/time.png") no-repeat;
  background-size: contain;
  width: 8.81276596rem;
  height: 1.88085106rem;
  top: 2.85106383rem;
  left: 0.74468085rem;
  animation: text-left 2s ease;
}
.page-three .bullet-text-third,
.page-five .bullet-text-third {
  position: absolute;
  top: 3.14893617rem;
  left: 2.98723404rem;
  background: url("../images/1/gift-word.png") no-repeat;
  background-size: contain;
  width: 12.2rem;
  height: 3.37021277rem;
  animation: text-right 2s ease;
}
.page-three .giftArea,
.page-five .giftArea {
  width: 100%;
  padding-top: 7.27659574rem;
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
}
.page-three .giftArea .giftBg,
.page-five .giftArea .giftBg {
  position: absolute;
  width: 100%;
  height: 15.14893617rem;
  left: 0;
  top: 7.27659574rem;
  background: url("../images/3/bg.png") center no-repeat;
  background-size: contain;
}
.page-three .giftArea .gift-layer,
.page-five .giftArea .gift-layer {
  margin-top: 1.36170213rem;
  width: 12rem;
  height: 12rem;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}
.page-three .giftArea .gift-layer img,
.page-five .giftArea .gift-layer img {
  width: 76%;
  height: 76%;
  z-index: 4;
  animation: shake-gift 3s infinite;
}
.page-three .share,
.page-five .share {
  margin-top: 3.40425532rem;
  width: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  padding: 0 0.81702128rem;
}
.page-three .share a,
.page-five .share a {
  display: block;
  flex-grow: 1;
  margin: 0 0.30638298rem;
}
.page-three .share a img,
.page-five .share a img {
  width: 100%;
}
@-webkit-keyframes shake-gift {
  0% {
    -webkit-transform: rotate(0);
  }
  20% {
    -webkit-transform: rotate(-30deg);
  }
  28% {
    -webkit-transform: rotate(27deg);
  }
  36% {
    -webkit-transform: rotate(-24deg);
  }
  44% {
    -webkit-transform: rotate(21deg);
  }
  52% {
    -webkit-transform: rotate(-18deg);
  }
  60% {
    -webkit-transform: rotate(15deg);
  }
  68% {
    -webkit-transform: rotate(-12deg);
  }
  76% {
    -webkit-transform: rotate(9deg);
  }
  84% {
    -webkit-transform: rotate(-6deg);
  }
  92% {
    -webkit-transform: rotate(3deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
.page-five {
  display: block;
}
.page-five .fire-six {
  position: absolute;
  top: 22.85106383rem;
  left: 2.38297872rem;
  background: url("../images/4/left.png") no-repeat;
  width: 1.20425532rem;
  height: 0.87659574rem;
  background-size: contain;
}
.page-five .openGift {
  position: absolute;
  top: 22.49361702rem;
  left: 4.08510638rem;
  background: url("../images/4/chai-gift.png") no-repeat;
  width: 8.18297872rem;
  height: 2.2893617rem;
  background-size: contain;
}
.page-five .fire-seven {
  position: absolute;
  top: 23.06382979rem;
  right: 2.4rem;
  background: url("../images/4/right.png") no-repeat;
  width: 1.20425532rem;
  height: 0.87659574rem;
  background-size: contain;
}
.page-five .salute {
  position: absolute;
  top: 24.81702128rem;
  left: 6.97021277rem;
  background: url("../images/4/mao.png") no-repeat;
  width: 2.05957447rem;
  height: 2.64255319rem;
  background-size: contain;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
